<template>
    <div class="orderListRuleForm">

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline" style="margin-left:0px">
            <el-form-item label="当前日期:" prop="qunfa_name">
                {{ currentDate }}
            </el-form-item>
            <el-form-item label="选择日期" prop="date" >
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
            </el-form-item>
        </el-form>


        <el-row class="demo-form-inline">
            <el-col class="client-demo" :span="3">
                <p>新增推广员数: </p>
                <p>{{new_popu_user_nums}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>我的推广员数: </p>
                <p>{{my_popu_user_nums}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p style="font-size: 13px;">7日无成交推广员数: </p>
                <p>{{seven_nums}}</p>
            </el-col>
        </el-row>

        <el-row class="demo-form-inline">
            <el-col class="client-demo" :span="3">
                <p>我的客户数: </p>
                <p>{{my_client_nums}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>累计成交订单: </p>
                <p>{{order_num}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>累计订单金额: </p>
                <p>{{order_account}}</p>
            </el-col>
        </el-row>

        <el-row class="demo-form-inline">
            <el-col class="client-demo" :span="3">
                <p>累计收益: </p>
                <p>{{money_balance}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>已提现收益: </p>
                <p>{{yi_tixian_money}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>剩余收益: </p>
                <p>{{money_shengyu}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>冻结收益: </p>
                <p>{{money_freeze}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>可提现金额: </p>
                <p>{{money_pay_await}}</p>
            </el-col>
            <el-col class="client-demo" :span="3">
                <p>提现中金额: </p>
                <p>{{money_pay_loading}}</p>
            </el-col>
            <el-col class="client-demo" :span="3" style="background-color: #f59a23">
                    <button  @click=" tixian() "  style = "height: 80px;width:80px;background-color: #f59a23;border:0;color: #fff;font-size: 18px;font-weight: bold;cursor: pointer">提现</button>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="weixin_open" width="800px" append-to-body title="操作">
            <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="14">
                        <img style="width:500px;height: 500px;" src="https://img1.baidu.com/it/u=2014810433,2718676070&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                        
                        <span  @click=" weixin_open = false;tixian_open = true " style="width: 500px;display: inline-block;color:deepskyblue;font-size: 30px;margin-left: 30%;margin-bottom: 10%;cursor: pointer">扫码操作完成以后请点击这里</span>

                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="weixin_open = false" size="small">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="tixian_open" width="800px" append-to-body title="操作">
            <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="14">

                        <span style=" display: inline-block; width: 500px;font-size: 30px;margin-left: 30%;margin-bottom: 10%;color:#000000">可提现金额：<span style="color:#f59a23;margin-bottom: 50px ">{{money_pay_await}}</span>元</span>
                        <el-form-item label="" prop="name" style="margin-left: 50px">
                            <el-input v-model="tixian_post.account" placeholder="输入提现金额" size="small"  @input="handleInput" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="tixian_open = false" size="small">取 消</el-button>
                <el-button type="primary" @click=" tixian_submit() " size="small">确 定</el-button>
            </div>
        </el-dialog>


    </div>


    
</template>

<script>


import {
    getlist,
    withDraw,
} from "@/api/sell/popuboard/popuboard";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';


export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel,
    },
    computed: {
        currentDate() {
            return new Date().toLocaleDateString();
        }
    },
    data() {
        return {
            weixin_open:false,
            tixian_open:false,
            new_popu_user_nums:0,
            my_popu_user_nums:0,
            seven_nums:0,
            my_client_nums:0,
            order_account:0,
            order_num:0,
            money_balance:0,
            yi_tixian_money:0,
            money_shengyu:0,
            money_freeze:0,
            money_pay_await:0,
            money_pay_loading:0,
            openid:false,

            tixian_post: {
                account: 0,
            },

            tableData: [],
            tableDataLinks: [],
            number:0,

            name:'',
            adder:'',
            status:'',
            date:'',

            pageSize1: 10,
            pageNumber1: 1,

            form: {

                date:'',
            },

            optionsVa: [],
            value1: [],
           
            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            old_str:'',
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')
        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            getlist(this.form).then((res) => {
                this.new_popu_user_nums = res.data.new_popu_user_nums;
                this.my_popu_user_nums = res.data.my_popu_user_nums;
                this.seven_nums = res.data.seven_nums;
                this.my_client_nums = res.data.my_client_nums;
                this.order_account = res.data.order_account;
                this.order_num = res.data.order_num;
                this.money_balance = res.data.money_balance;
                this.yi_tixian_money = res.data.yi_tixian_money;
                this.money_shengyu = res.data.money_shengyu;
                this.money_freeze = res.data.money_freeze;
                this.money_pay_await = res.data.money_pay_await;
                this.money_pay_loading = res.data.money_pay_loading;
                if(res.data.openid){
                    this.openid = true;
                }

            })
        },
     
        handleInput(value) {
            
            const regex = /^\d+\.?\d{0,999}?$/
            // 如果输入值不符合正则表达式，则将其设置为上一个值，即不进行更改  33.36
            if (!regex.test(value)) {
                this.tixian_post.account = "";
                // this.tixian_post.account = this.tixian_post.account.substring(0, this.tixian_post.account.length - 1); 
                
            }
           
        },

        tixian(){
            // if(this.openid){
            //     this.tixian_open =   true
            // }else{
            //     this.weixin_open =   true
            // }
            this.tixian_open =   true

        },
        create: function () {
            this.open = true
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        search: function () {
            this.loading = true;
            // this.form.pageSize = 10;
            // this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        handleSizeChange1: function (e) {
            this.pageSize1 = e;
            this.init();
        },
        handleCurrentChange1: function (e) {
            this.pageNumber1 = e;
            this.init();
        },
        resetForm(formName) {
            this.form.lapsed_time = ''
            this.form.label = ''
            this.form.day_time = ''
            this.form.add_time = ''
            this.init();
        },
        openSaff: async function() {
            
            const res = await getStaffData();
            this.optionsVa = res.data;
            const des = await getCustomerLossData();
            this.resForm.value1 = des.data.send_name;
            this.resForm.status = des.data.status;
            // this.resForm = {
            //     "status": 0,
            //     "value1": [],
            // };
            this.open = true;
            
        },
        submitForm:function(data){
            if (this.form1.name == '') {
                this.$notify({
                    title: '警告',
                    message: '商品名称不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.type == '') {
                this.$notify({
                    title: '警告',
                    message: '商品类型不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.price == '') {
                this.$notify({
                    title: '警告',
                    message: '商品价格不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.commission == '') {
                this.$notify({
                    title: '警告',
                    message: '商品佣金不能为空',
                    type: 'warning'
                });
                return;
            }


            this.$confirm('确定保存吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.form1.detail = this.quill_info
                     addGoods(this.form1).then((res) => {
                    this.loading = false;
                 })

            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });



        },


        tixian_submit(){

            if (this.tixian_post.account== 0) {
                this.$notify({
                    title: '警告',
                    message: '提现金额不能为空',
                    type: 'warning'
                });
                return;
            }

            if(this.tixian_post.account > this.money_pay_await){
                this.$notify({
                    title: '警告',
                    message: '提现金额不能超过可提现金额',
                    type: 'warning'
                });
                return;
            }

             const regex = /^\d+\.?\d{0,2}?$/
            if (!regex.test(this.tixian_post.account)) {
                 this.$notify({
                    title: '警告',
                    message: '提现金额格式是正数(小数点后最多两位)',
                    type: 'warning'
                });
                return;
            }


           

            withDraw(this.tixian_post).then((res) => {
                this.loading = false;
            this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
            });
            this.tixian_open = false
                this.tixian_post.account = 0
            this.init()

        })
        },
      
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}
.yaoyue_neirong_content {
    display: flex;
}


.yaoyue_neirong_content_body {
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    padding: 10px;
    margin-left: 10px;
    width: 90%;
}

.yaoyue_neirong_content_title {
    width: 10%;
}

.yaoyue_neirong_content {
    width: 160%;
}
.client-demo{
    padding:10px 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-left:40px;
    height: 120px;
}

</style>